<template>
  <Header title="退款进度" />

  <div class="process" :style="'height: ' + maxHeight + 'px'">
    <nut-steps direction="vertical" current="2">
      <nut-step title="已完成" content="您的订单已经打包完成，商品已发出"
        >1</nut-step
      >
      <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
      <nut-step title="未开始">3</nut-step>
    </nut-steps>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const { proxy } = getCurrentInstance();

const maxHeight = ref(`${document.documentElement.clientHeight}` - 85);

// 订单信息
const orderData = reactive({});

// 页面加载完毕
onMounted(() => {
  proxy.$orderApi.order.info(route.query.orderId).then((res) => {
    Object.assign(orderData, res.data);
  });
});
</script>

<style lang="less" scoped>
.process {
  padding: 20px 15px;
  background: #fff;
}
</style>